<template>
  <svg id="minesvg" style="width: 800px; height: 600px"></svg>
</template>

<script>
import Snap from "snapsvg-cjs";
// import { zpd } from "snap.svg.zpd";

export default {
  name: "MineClearance",
  data() {
    return {
      group: null,
      mingCount: 20,
      mineRectSize: {
        length: 20,
        migrin: 0,
        getX: function (col) {
          return col * this.length + this.migrin;
        },
        getY: function (row) {
          return row * this.length + this.migrin;
        },
      },
      mineArr: [],
    };
  },
  methods: {
    random(min, max) {
      return Math.floor((max - min + 1) * Math.random()) + min;
    },
    drawMine(len) {
      let limit = len + 1;
      let paper = this.group.paper;
      let mineClick = this.mineClick;
      for (let i = 1; i < limit; i++) {
        for (let j = 1; j < limit; j++) {
          let id = `${i.toString().padStart(2, "0")}${j
            .toString()
            .padStart(2, "0")}`;

          let rect = paper
            .rect(
              this.mineRectSize.getX(i),
              this.mineRectSize.getY(j),
              this.mineRectSize.length,
              this.mineRectSize.length
            )
            .attr({
              fill: "#909399",
              id,
              mine: false,
            });
          console.log(rect);
          rect.click(function () {
            mineClick(rect);
          });
          this.group.append(rect);
        }
      }
    },
    mineClick(rect) {
      let id = rect.node.id;

      console.log(id, "id");
      rect.attr({
        fill: "#C0C4CC",
      });
    },
    checkMine(id) {
      return 0;
    },
  },
  mounted() {
    var svg = Snap("#minesvg");
    svg.zpd();
    this.group = svg.select("g");
    this.drawMine(16);
  },
};
</script>

<style>
</style>